<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div 
        class="box active"
        id="myid" 
        myattr="val"
    ></div>
    <script>
        // 一、jq里元素的属性操作 
        // prop :  checkbox 设置 checked属性的时候需要用 prop
        // 1.prop ： 获取属性  设置属性 
        // 获取属性 : 只能获取 固有属性 ，不能获取自定义属性
        // $(".box").click(function(){
        //     var val = $(this).prop("id");  // 获取元素的属性 
        //     console.log(val);
        // })

        // 设置属性  : 设置固有属性 
        // $(".box").click(function(){
        //     //  $(this).prop("id","mytestid");  // 设置id属性  
        //     // $(this).prop("myattr","val");
        //     // console.log($(this).prop("myattr"))
        //     $(this).prop("style","width:200px");
        // })


        // 删除属性  : 移除非固有属性  ，固有不能移除；
        // $(".box").click(function(){
        //     console.log(111);
        //     $(this).removeProp("myattr");
        //     console.log($(this).prop("myattr"));
        // });


        // 2、attr 操作属性
        // 1.设置属性 
        // $(".box").click(function(){
        //     // $(this).attr("id","mytest");
        //     $(this).attr("myattr","mytest");
        // })

        // 2.获取属性
        // $(".box").click(function(){
        //     // console.log($(this).attr("myattr"));
        //     console.log($(this).attr("id"));
        // })

        // 3.删除属性 
        // $(".box").click(function(){
        //     // $(this).removeAttr("id");
        //     $(this).removeAttr("myattr");
        // })


        // 二、类名的操作 
        // 1.添加类名  addClass
        // classList.add()
        // $(document).click(function(){
        //     $(".box").addClass("active");
        // })

        // 2.删除类名 
        // $(document).click(function(){
        //     $(".box").removeClass("active");
        // })

        // 3.切换类名 toggleClass
        // $(document).click(function(){
        //     $(".box").toggleClass("active");
        // })


        // 4.包含某个类名hasClass
            // contains
        $(document).click(function(){
            var res = $(".box").hasClass("active1");
            console.log(res);
        })
    </script>
</body>
</html>